import React from "react";
import "./input.css";
const SingleInput = ({ length, getValue, type = "number" }) => {
  const value = [];
  const inputVal = (i, e) => {
    value[i] = e.target.value;
    e.target.value
      ? e.target.nextElementSibling && e.target.nextElementSibling.focus()
      : e.target.previousElementSibling &&
        e.target.previousElementSibling.focus();
    getValue(value.join(""));
  };
  const content = [];
  for (let i = 0; i < length; i++) {
    content.push(
      <input
        className="oneInput"
        type={type}
        maxLength="1"
        key={i}
        onChange={(e) => inputVal(i, e)}
      />
    );
  }
  return <div>{content}</div>;
};
export default SingleInput;
